<template>
  <div class="approximation my-scrollbar">
    <!-- {{ dataDetail }} -->
    <!-- <a-checkbox-group v-model:value="checkedList"> -->
    <div v-for="item1 in dataDetail" :key="item1?.groupId" class="approximation-item">
      <ul class="card-list">
        <li v-for="item2 in item1?.dataList" :key="item2?.url" class="card-list-item">
          <data-card
            :title="item2.dataName"
            :size="item2.size"
            :value="item2.id"
            :url="item2.reviewUrl"
            :source-url="item2.url"
            :resolution="`${item2?.width}*${item2?.length}`"
          />
        </li>
      </ul>
    </div>
    <!-- </a-checkbox-group> -->
    <my-infinite-loading :empty="dataDetail.length === 0" :identifier="identifier" @infinite="loadData">
      <template #empty>
        <default-graph style="margin-top: 200px">
          <img src="@/assets/img/empty-img-simple.svg" />
          <template #title>
            <p class="default-graph-title">无近似内容</p>
          </template>
        </default-graph>
      </template>
    </my-infinite-loading>
  </div>

  <!-- <checkbox-control v-if="checkPermissions(detailInfo?.createType, detailInfo?.readOnly)" v-model:checked-list="checkedList">
    <template #control>
      <a-button :loading="loading" @click="batchDeletion">批量删除</a-button>
    </template>
  </checkbox-control> -->
</template>

<script setup lang="ts">
  import { ref } from 'vue'
  import { useRoute } from 'vue-router'

  import { dataCleaningApi } from '@/services/api'

  import DataCard from '../DataCard/index.vue'

  export interface ApproximationProps {
    detailInfo?: any
  }
  withDefaults(defineProps<ApproximationProps>(), {
    detailInfo: {}
  })

  const emits = defineEmits<{
    (e: 'updateData'): void
  }>()

  const route = useRoute()
  const parentParams = route.params as any

  const identifier = ref<number>(1)
  const checkedList = ref<string[]>([])
  const dataDetail = ref<any[]>([])

  const pageForm = ref({
    taskId: parentParams.id,
    limit: 5,
    offset: 1
  })

  // 底部滚动
  const loadData = async ($state: any) => {
    try {
      const {
        data: { records }
      } = await dataCleaningApi.approximateTaskResult(pageForm.value)
      if (records.length < pageForm.value.limit) {
        $state.complete()
      } else {
        pageForm.value.offset++
        $state.loaded()
      }
      records.forEach((element: any) => {
        const idList: string[] = element.dataList.map((item: any) => item.id).slice(1)
        checkedList.value = checkedList.value.concat(idList)
      })
      dataDetail.value = dataDetail.value.concat(records)
    } catch (error) {
      $state.error()
    }
  }
</script>

<style lang="less" scoped>
  .approximation {
    overflow: hidden auto;
    width: 100%;
    height: 591px;
    border-radius: 10px;

    .approximation-item {
      margin-bottom: 8px;

      > header {
        padding: 0 4px;
        font-size: 12px;
        color: rgba(17, 22, 31, 0.52);
        background: rgba(17, 103, 240, 0.03);
        font-weight: 700;
        line-height: 20px;
      }

      .card-list {
        display: grid;
        margin-top: 8px;
        grid-template-columns: repeat(3, 186px);
        gap: 8px 8px;

        .card-list-item {
          height: 110px;
        }
      }
    }
  }
</style>
